<template>
	<view class="learnLayout pageBg">
		<custom-nav-title :title="title"></custom-nav-title>
		<!-- <view class="video" :style="{height: navHeight + 'px'}">
			<video class="myVideo" autoplay object-fit="contain"
			:style="{height: navHeight + 'px'}"
			:src="videos[current]?.video"
			:title="videos[current]?.name"
				@error="videoErrorCallback" 
				@ended="videoEnded"
				enable-play-gesture="true"></video>
		</view> -->
		<!-- <view class="note">
			<view class="title">脑子攻略</view>
			<view class="content">
				<view class="chapter" v-for="item in 5">
					<view class="en">hahaha</view>
					<view class="cn">哈哈哈</view>
				</view>
			</view>
			<view class="operate">
				<view class="button">强得可怕，要长脑子</view>
			</view>
		</view> -->
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onReady } from '@dcloudio/uni-app'
import {apiGetLearn} from '@/api/apis.js'
import { getWindowHeight, getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from '@/utils/system.js'

let navHeight = ref(0);
const title = ref("");
const current = ref(0);
const videos = ref([]);
const getLearn = async() => {
	let res = await apiGetLearn();
	videos.value = res.data;
	title.value = (current.value + 1) + "/" + videos.value?.length + " " + videos.value[current.value]?.name;
}
onReady(() => {
	getLearn();
	// 计算滑动窗高度
	/* 
	setTimeout(() => { // fixbug：不加setTimeout算出来的宽度会不准，极其坑
	let windowHeight = getWindowHeight();
	let videoH=uni.createSelectorQuery().select(".video"); //想要获取高度的元素名（class/id）
	videoH.boundingClientRect(data=>{
		// #ifdef MP-WEIXIN
			navHeight.value = windowHeight - Math.ceil(data.top);
		// #endif
		// #ifndef MP-WEIXIN
			navHeight.value = windowHeight - Math.ceil(data.top) - 50;
		// #endif
	}).exec();
	}, 0); */
})
const videoEnded = () => {
	// console.log(current.value + "-=----" + videos.value.length)
	if(current.value<videos.value.length-1){
		current.value = current.value + 1;
	}else {
		current.value = 0;
		// uni.showModal({
		// 	title: '偷瞄完成',
		// 	content: '有点脑子的记住了，没脑子的再看一遍',
		// 	cancelText: '再看一遍',
		// 	confirmText: '去长脑子',
		// 	success: function (res) {
		// 		if (res.confirm) {
		// 			console.log('用户点击去长脑子');
		// 		} else if (res.cancel) {
		// 			current.value = 0;
		// 		}
		// 	}
		// })
	}
}

const videoErrorCallback = () => {
	
}
</script>

<style lang="scss" scoped>
.learnLayout{
	width: 100%;
	height: 100%;
	.video{
		width: 100%;
		.myVideo{
			width: 100%;
			/* &:focus {
				outline:none;
			} */
		}
	}
	.note{
		margin: 30rpx;
		.title{
			font-size: 50rpx;
			color: $text-font-color-2;
		}
		.content{
			margin-top: 20rpx;
			.chapter{
				display: flex;
			}
		}
		.operate{
			height: 80rpx;
			border-radius: 10rpx;
			margin: 10rpx 0;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
		}
	}
}	       
</style>
